<template>
    <div class="qr-card-container">
        <div class="qr-card">
            <div class="card-header" v-if="title">
                <h3 class="card-title">{{ title }}</h3>
                <div class="card-actions">
                    <slot name="actions"></slot>
                </div>
            </div>

            <div class="card-content">
                <div v-if="qrCodeUrl" class="qr-image-container">
                    <img :src="qrCodeUrl" alt="二维码" class="qr-image" />
                    <div v-if="isDown" class="download-overlay">
                        <a :href="qrCodeUrl" :download="downloadFilename" class="download-btn">
                             下载二维码
                        </a>
                    </div>
                </div>
                <div v-else class="qr-placeholder">
                    <i class="fas fa-qrcode fa-3x"></i>
                    <p class="placeholder-text">正在生成二维码...</p>
                </div>
            </div>

            <div class="card-footer" v-if="isEdit">
                <p class="url-display">
                    <span class="url-label">内容链接:</span>
                    <span class="url-value">{{ displayUrl }}</span>
                </p>
                <div class="url-actions">
                    <button @click="handleEdit" class="edit-btn">
                        <i class="fas fa-edit"></i> 重新生成
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import qrcode from 'qrcode';

export default {
    name: 'QrCodeCard',
    props: {
        // 从父组件传入的URL
        title: {
            type: String,
            default: ''
        },
        url: {
            type: String,
            required: true,
            default: ''
        },
        // 是否显示下载按钮
        isDown: {
            type: Boolean,
            default: false
        },
        // 是否显示编辑按钮
        isEdit: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            qrCodeUrl: null,
            downloadFilename: 'qrcode.png'
        };
    },
    computed: {
        displayUrl() {
            // 截断长URL，显示前20个字符
            return this.url.length > 30
                ? `${this.url.substring(0, 25)}...`
                : this.url;
        }
    },
    watch: {
        url: {
            immediate: true,
            async handler(newUrl) {
                if (newUrl) {
                    await this.generateQrCode(newUrl);
                }
            }
        }
    },
    methods: {
        async generateQrCode(url) {
            try {
                // 生成二维码
                this.qrCodeUrl = await qrcode.toDataURL(url, {
                    width: 300,
                    height: 300,
                    margin: 2,
                    color: {
                        dark: '#000000',
                        light: '#ffffff'
                    }
                });
            } catch (error) {
                console.error('生成二维码失败:', error);
                this.qrCodeUrl = null;
            }
        },
        handleEdit() {
            this.$emit('edit');
        }
    }
};
</script>

<style scoped>
.qr-card-container { 
    max-width: 100%;
    max-height: 100%;
}
.qr-card {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-header {
    padding: 20px;
    background: #3c9cff66;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 1rem;
    text-align: center;
    width:100%;
    margin: 0;
}

.card-actions {
    display: flex;
    gap: 10px;
}

.card-content {
    padding: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qr-image-container {
    position: relative;
    max-width: 100%;
    max-height: 100%;
}

.qr-image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.download-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.download-overlay:hover {
    opacity: 1;
}

.download-btn {
    background: white;
    color: #4b6cb7;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.download-btn:hover {
    background: #f0f4ff;
    transform: translateY(-2px);
}

.qr-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300px;
    color: #a0aec0;
}

.placeholder-text {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #718096;
}

.card-footer {
    padding: 20px 30px;
    border-top: 1px solid #edf2f7;
    background: #f8fafc;
}

.url-display {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    color: #4a5568;
}

.url-label {
    font-weight: 600;
    margin-right: 8px;
    color: #2d3748;
}

.url-value {
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 250px;
    color: #4a5568;
}

.url-actions {
    display: flex;
    justify-content: center;
}

.edit-btn {
    background: #3c9cff;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(75, 108, 183, 0.3);
}

.edit-btn:hover {
    background: #3385d6;
    transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 480px) {
    .qr-card {
        border-radius: 12px;
    }

    .card-header {
        padding: 15px;
    }
}
</style>